<template>
  <div>
    <el-dialog
      title="会员赠送详情"
      :visible.sync="dialogVisible"
      width="750px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div v-loading="loading" class="dialog-give-detail">
        <div class="left">
          <ul v-if="detail">
            <li>
              <div>赠送时间：</div>
              <div>{{ detail.giveRecord.createTime }}</div>
            </li>
            <li>
              <div>来源：</div>
              <div>{{ sourceOption[detail.giveRecord.source] }}</div>
            </li>
            <li>
              <div>会员卡：</div>
              <div>{{ detail.giveRecord.categoryName }}</div>
            </li>
            <li>
              <div>附赠余额：</div>
              <div>￥{{ detail.giveRecord.extraBalance|parseNumberToThousands }}</div>
            </li>
            <li>
              <div>赠送人：</div>
              <div>{{ detail.giverName }}</div>
            </li>
            <li>
              <div>状态：</div>
              <div>{{ statusOption[detail.giveRecord.status] }}</div>
            </li>
            <li v-if="detail.giveRecord.status===2">
              <div>兑换人：</div>
              <div>{{ detail.receiverName }}</div>
            </li>
            <li v-if="detail.giveRecord.status===2">
              <div>兑换时间：</div>
              <div>{{ detail.giveRecord.receiveTime }}</div>
            </li>
          </ul>
        </div>
        <div class="right">
          <div>
            <!-- 有二维码 -->
            <div v-if="defaultMaIsOnline" class="qr-code">
              <img :src="qrCodeUrl" alt>
              <div>领取二维码</div>
            </div>
            <!-- 小程序未上线 -->
            <div v-else class="warn-tips app-text-color-danger">
              <i class="el-icon-warning app-text-color-danger" />
              <div>商户小程序未正式发布，暂时不可以获取二维码</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGiveVipCardRecordDetail } from '@/api/vip'
import { getWxQrCodeByScene } from '@/api/wxCode'
export default {
  data() {
    return {
      // 状态
      dialogVisible: false,
      statusOption: [
        // 赠送会员卡状态
        '未支付',
        '未领取',
        '已领取',
        '已撤销',
        '已过期',
        '支付失败'
      ],
      sourceOption: { admin: '商户后台', wxapp: '微信小程序' }, // 赠送来源
      loading: false,
      // 数据
      qrCodeUrl: '',
      defaultMaIsOnline: null,
      detail: null
    }
  },
  mounted() {},

  methods: {
    open(code) {
      this.show(code)
    },

    show(code) {
      this.dialogVisible = true
      // 如果有线上版本 获取二维码
      if (this.$store.state.wechat.maInfo.DEFAULT.isOnline) {
        this.defaultMaIsOnline = this.$store.state.wechat.maInfo.DEFAULT.isOnline
        const params = {}
        params.appId = this.$store.state.wechat.maInfo.DEFAULT.appId
        params.page = 'pages/sendCard/main'
        params.scene = code
        this.loading = true
        getWxQrCodeByScene(params)
          .then(res => {
            this.qrCodeUrl = res.data
            this.loading = false
          })
          .catch(err => {
            this.loading = false
          })
      }
      getGiveVipCardRecordDetail(code).then(res => {
        this.detail = res.data
      })
    },

    close() {
      this.qrCodeUrl = ''
    },

    hide() {
      this.dialogVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dialog-give-detail {
    overflow: hidden;
    height: 300px;
    margin-bottom: 10px;
    .left {
      display: flex;
      align-items: center;
      float: left;
      width: 300px;
      height: 100%;
      li {
        margin-bottom: 20px;
        div:first-child {
          display: inline-block;
          width: 100px;
          text-align: right;
        }
        div:last-child {
          display: inline-block;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      text-align: center;
      .qr-code {
        img {
          width: 250px;
          height: 250px;
          margin-bottom: 10px;
        }
      }
      .warn-tips {
        height: 250px;
        div {
          margin-top: 20px;
        }
        .el-icon-warning {
          margin-top: 50px;
          font-size: 80px;
        }
      }
    }
  }
</style>
